<style>
.columns {
    display: flex;
}

</style>
<script>

</script>
<div class="layui-tab-content">
    <form action="{:sysuri()}" id="thatForm" method="post" {if !isset($is_ztree)}data-auto="true"{/if} class="layui-form layui-card" data-table-id="{$tableId}">
        <div class="layui-card-body padding-left-40">
            <fieldset class="layui-bg-gray">
                <legend><b class="layui-badge think-bg-violet">表单信息</b></legend>
                {foreach $field as $val}
                {if $val['type']=='legend'}
                <fieldset class="layui-elem-field layui-field-title" style="background: none;padding: 0;">
                    <legend>{$val.label}</legend>
                </fieldset>
                {else}
                {php}
                if($val['class_name']){
                $classname = $val['class_name'];
                }else{
                $classname = $val['field'].' '.$val['class_name'];

                }

                {/php}
                <div class="layui-form-item {$classname}" {if isset($val['hide'])}style="display:none;"{/if}>
                    <div class="help-label {if isset($val['required'])}label-required-prev{/if}"><b>{$val.label}</b></div>
                    <div class="layui-textarea help-checks">
                        {$val.view|raw}
                    </div>

                    {if isset($val['help'])}
                    <span class="help-block">{$val['help']}</span>
                    {/if}

                    {if isset($val['script'])}
                    {$val.script|raw}
                    {/if}
                </div>
                {/if}

                {/foreach}
            </fieldset>
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？"  {if isset($formType) && $formType="open"}data-history-back{else}data-close{/if}>取消编辑</button>
        </div>
        <div style="height: 50px;"></div>
    </form>
</div>
<script>
    var isopen
</script>
{if isset($formType) && $formType="open"}
<script>
    var isopen = 1
</script>
{/if}
<script>

    require(['ckeditor'], function () {
        /*! 初始化 富文本插件 */
        (function initTextArea() {

            $('textarea[data-editor]').map(function () {

                if (!$(this).attr('inited')) {
                    $(this).attr('inited', true);
                    window.createEditor('[name='+$(this).attr('name')+']', {height: 150})
                }
            });
            setTimeout(initTextArea, 100);
        })();
    });

</script>
{if isset($is_ztree)}
<script>
    require(['jquery.ztree'], function () {
        new function () {
            let that = this;
            this.data = {}, this.ztree = null, this.setting = {
                view: {showLine: false, showIcon: false, dblClickExpand: false},
                check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}}, callback: {
                    beforeClick: function (id, node) {
                        node.children.length < 1 ? that.ztree.checkNode(node, !node.checked, true, true) : that.ztree.expandNode(node);
                        return false;
                    }
                }
            };
            this.renderChildren = function (list, level) {
                let childrens = [];
                for (let i in list) childrens.push({
                    open: true, node: list[i].node, name: list[i].title || list[i].node,
                    checked: list[i].checked || false, children: this.renderChildren(list[i]._sub_, level + 1)
                });
                return childrens;
            };
            this.syncData = function () {
                $.form.load('{:sysuri()}', {id: '{$vo.id|default=0}', action: 'json'}, 'post', function (ret) {
                    return (that.data = that.renderChildren(ret.data, 1)), that.showTree(), false;
                });
            };
            this.showTree = function () {
                this.ztree = $.fn.zTree.init($("#zTree"), this.setting, this.data);
                while (true) {
                    let nodes = this.ztree.getNodesByFilter(function (node) {
                        return (!node.node && node.children.length < 1);
                    });
                    if (nodes.length < 1) break;
                    for (let i in nodes) this.ztree.removeNode(nodes[i]);
                }
            };
            // 刷新数据
            this.syncData();
            // 监听表单提交
            $('#thatForm').vali(function (form) {
                let data = that.ztree.getCheckedNodes(true);
                Object.assign(form, {nodes: [], action: 'save'})
                for (let i in data) {
                    if (data[i].node){
                        form.nodes.push(data[i].node);
                    }
                }

                $.form.load('{:sysuri()}', form, 'post');
            });
        };
    });
</script>
{/if}
{block name="style"}
<style>
    ul.ztree li {
        line-height: 24px;
        white-space: normal !important;
    }

    ul.ztree li span.button.switch {
        margin-right: 5px;
    }

    ul.ztree ul ul li {
        display: inline-block;
        white-space: normal;
    }

    ul.ztree > li {
        border: 1px solid rgba(0, 0, 0, 0.10);
        padding: 15px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        margin-bottom: 10px;
    }

    ul.ztree > li > ul {
        padding: 10px;
        margin-top: 10px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    ul.ztree > li > ul > li {
        padding: 5px 0;
    }

    ul.ztree > li > a > span {
        font-size: 15px;
        font-weight: 700;
    }

    ul.ztree .level2 .button.level2 {
        width: 0;
    }

    ul.ztree li span.button.noline_open {
        background-position-y: -73px;
    }

    ul.ztree li span.button.noline_close {
        background-position-y: -73px;
    }

    ul.ztree .level1 > .node_name {
        font-weight: bold;
    }
</style>
{/block}
